<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3797ad',
                        secondary: '#4a80ff',
                        neutral: {
                            100: '#f4f4f4',
                            200: '#e4e4e4',
                            700: '#444647',
                            900: '#333333'
                        }
                    },
                    fontFamily: {
                        sans: ['Arial', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }
            .btn-secondary {
                @apply bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }
            .btn-outline {
                @apply border border-neutral-300 hover:border-primary text-neutral-700 hover:text-primary font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }
            .btn-danger {
                @apply bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }
            .table-row-hover {
                @apply hover:bg-primary/5 transition-colors duration-200;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen flex flex-col">
<!-- 顶部导航条 -->
<header class="bg-white shadow-sm">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <h1 class="text-2xl font-bold text-primary hidden md:block">用户管理系统</h1>

        <!-- 移动端菜单按钮 -->
        <button id="mobile-menu-button" class="md:hidden text-neutral-700">
            <i class="fa fa-bars text-xl"></i>
        </button>

        <!-- 登录信息 -->
        <div class="flex items-center gap-3">
            <div class="hidden md:block">
                <span class="text-neutral-700">管理员</span>
            </div>
            <button onclick="logout()" class="btn-primary flex items-center gap-2">
                <i class="fa fa-sign-out"></i>
                <span class="hidden sm:inline">登出</span>
            </button>
        </div>
    </div>
</header>

<div class="flex flex-1 overflow-hidden">
    <!-- 侧边栏导航 -->
    <aside id="sidebar" class="w-64 bg-white shadow-md transform -translate-x-full md:translate-x-0 fixed md:sticky top-0 bottom-0 z-20 transition-transform duration-300">
        <div class="p-4 h-full flex flex-col">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-primary flex items-center gap-2">
                    <i class="fa fa-tachometer"></i>
                    <span>控制面板</span>
                </h2>
            </div>

            <nav class="flex-1 overflow-y-auto">
                <ul class="space-y-1">
                    <li>
                        <a href="#" class="flex items-center gap-3 px-4 py-3 text-primary bg-primary/10 font-medium rounded-lg transition-all duration-200">
                            <i class="fa fa-users"></i>
                            <span>用户管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="adminindex.html" class="flex items-center gap-3 px-4 py-3 text-neutral-700 hover:bg-primary/10 hover:text-primary rounded-lg transition-all duration-200">
                            <i class="fa fa-user-circle-o"></i>
                            <span>返回</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- 侧边栏底部 -->
            <div class="pt-4 border-t border-neutral-200">
                <div class="flex items-center gap-3 text-sm text-neutral-700">
                    <i class="fa fa-info-circle"></i>
                    <span>系统版本 v1.0.0</span>
                </div>
            </div>
        </div>
    </aside>

    <!-- 遮罩层 -->
    <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-10 hidden md:hidden" onclick="toggleSidebar()"></div>

    <!-- 主内容区 -->
    <main class="flex-1 p-4 md:p-6 overflow-y-auto">
        <div class="max-w-7xl mx-auto">
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-900">用户管理</h2>
                <p class="text-neutral-700">查看和管理系统用户信息</p>
            </div>

            <!-- 用户类型切换 -->
            <div class="mb-6 flex flex-wrap gap-2">
                <button id="show-users-btn" class="btn-primary">
                    <i class="fa fa-users"></i>
                    <span>普通用户</span>
                </button>
                <button id="show-admins-btn" class="btn-outline">
                    <i class="fa fa-user-circle-o"></i>
                    <span>管理员</span>
                </button>
                <button id="add-user-btn" class="btn-secondary ml-auto">
                    <i class="fa fa-plus"></i>
                    <span>添加用户</span>
                </button>
            </div>

            <!-- 搜索和筛选 -->
            <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <label class="block text-sm font-medium text-neutral-700 mb-1">搜索用户</label>
                        <div class="relative">
                            <input type="text" id="search-input" placeholder="输入用户名、账号或手机号搜索..."
                                   class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
                            <button id="search-button" class="absolute right-2 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary transition-colors duration-200">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>

                    <div class="w-full md:w-auto flex items-end">
                        <button id="refresh-button" class="btn-outline flex items-center gap-2 w-full md:w-auto">
                            <i class="fa fa-refresh"></i>
                            <span>刷新</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 用户列表 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                        <tr class="bg-neutral-100">
                            <th class="px-6 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">用户ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">用户名</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">账号</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">生日</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">创建时间</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">操作</th>
                        </tr>
                        </thead>
                        <tbody id="user-table-body" class="divide-y divide-neutral-200">
                        <!-- 这里将通过JavaScript动态填充用户数据 -->
                        <tr class="animate-pulse">
                            <td colspan="6" class="px-6 py-10 text-center text-neutral-500">
                                <i class="fa fa-spinner fa-spin mr-2"></i>加载用户数据中...
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 空状态（默认隐藏） -->
                <div id="empty-state" class="hidden p-10 text-center">
                    <div class="mb-4 text-5xl text-neutral-300">
                        <i class="fa fa-user-o"></i>
                    </div>
                    <h3 class="text-lg font-medium text-neutral-900 mb-1">暂无用户数据</h3>
                    <p class="text-neutral-500 mb-4">没有找到匹配的用户，请尝试其他搜索条件。</p>
                    <button id="reset-filter-button" class="btn-outline">
                        <i class="fa fa-filter"></i>
                        <span>重置筛选</span>
                    </button>
                </div>
            </div>

            <!-- 分页控制 -->
            <div class="flex flex-col md:flex-row justify-between items-center gap-4 bg-white rounded-xl shadow-sm p-5">
                <div class="text-sm text-neutral-700">
                    显示 <span id="page-range">1-10</span> 条，共 <span id="total-count">0</span> 条记录
                </div>

                <div class="flex items-center gap-2">
                    <button id="prev-page" class="btn-outline px-3 py-1.5" disabled>
                        <i class="fa fa-chevron-left"></i>
                    </button>

                    <div id="pagination-numbers" class="flex items-center gap-1">
                        <!-- 页码将通过JavaScript动态生成 -->
                    </div>

                    <button id="next-page" class="btn-outline px-3 py-1.5">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- 添加/编辑用户模态框 -->
<div id="user-form-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-lg mx-4 overflow-hidden transform transition-all duration-300 scale-95 opacity-0" id="form-modal-content">
        <div class="p-5 border-b border-neutral-200 flex justify-between items-center">
            <h3 class="text-lg font-bold text-neutral-900" id="form-modal-title">添加用户</h3>
            <button id="close-form-modal" class="text-neutral-500 hover:text-neutral-700">
                <i class="fa fa-times"></i>
            </button>
        </div>

        <form id="user-form" class="p-5">
            <input type="hidden" id="user-id" name="user-id">
            <input type="hidden" id="user-type" name="user-type" value="user">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-neutral-700 mb-1">用户名</label>
                    <input type="text" id="username" name="username" required
                           class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
                </div>
                <div>
                    <label class="block text-sm font-medium text-neutral-700 mb-1">账号</label>
                    <input type="text" id="account" name="account" required
                           class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-neutral-700 mb-1">密码</label>
                    <input type="password" id="password" name="password"
                           class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
                </div>
                <div>
                    <label class="block text-sm font-medium text-neutral-700 mb-1">确认密码</label>
                    <input type="password" id="confirm-password" name="confirm-password"
                           class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-neutral-700 mb-1">生日</label>
                <input type="date" id="birthday" name="birthday"
                       class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
            </div>
        </form>

        <div class="p-5 border-t border-neutral-200 flex justify-end gap-3">
            <button id="cancel-form-button" class="btn-outline">
                取消
            </button>
            <button id="save-user-button" class="btn-primary">
                <i class="fa fa-save"></i>
                <span>保存</span>
            </button>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div id="delete-confirm-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md mx-4 overflow-hidden transform transition-all duration-300 scale-95 opacity-0" id="delete-modal-content">
        <div class="p-5 border-b border-neutral-200">
            <h3 class="text-lg font-bold text-neutral-900">确认删除</h3>
        </div>

        <div class="p-5">
            <p class="text-neutral-700 mb-4">您确定要删除该用户吗？此操作不可撤销。</p>
            <input type="hidden" id="delete-user-id">
            <input type="hidden" id="delete-user-type">
        </div>

        <div class="p-5 border-t border-neutral-200 flex justify-end gap-3">
            <button id="cancel-delete-button" class="btn-outline">
                取消
            </button>
            <button id="confirm-delete-button" class="btn-danger">
                <i class="fa fa-trash"></i>
                <span>确认删除</span>
            </button>
        </div>
    </div>
</div>

<script>
    // 当前查看的用户类型（user或admin）
    let currentUserType = 'user';

    // 侧边栏切换
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebar-overlay');

        sidebar.classList.toggle('-translate-x-full');
        overlay.classList.toggle('hidden');
    }

    document.getElementById('mobile-menu-button').addEventListener('click', toggleSidebar);

    // 页面加载后初始化
    document.addEventListener('DOMContentLoaded', () => {
        // 加载普通用户数据
        loadUsers('user');

        // 绑定用户类型切换按钮事件
        document.getElementById('show-users-btn').addEventListener('click', () => {
            loadUsers('user');
            document.getElementById('show-users-btn').classList.remove('btn-outline');
            document.getElementById('show-users-btn').classList.add('btn-primary');
            document.getElementById('show-admins-btn').classList.remove('btn-primary');
            document.getElementById('show-admins-btn').classList.add('btn-outline');
            currentUserType = 'user';
            document.getElementById('user-type').value = 'user';
            document.getElementById('form-modal-title').textContent = '添加用户';
        });

        document.getElementById('show-admins-btn').addEventListener('click', () => {
            loadUsers('admin');
            document.getElementById('show-admins-btn').classList.remove('btn-outline');
            document.getElementById('show-admins-btn').classList.add('btn-primary');
            document.getElementById('show-users-btn').classList.remove('btn-primary');
            document.getElementById('show-users-btn').classList.add('btn-outline');
            currentUserType = 'admin';
            document.getElementById('user-type').value = 'admin';
            document.getElementById('form-modal-title').textContent = '添加管理员';
        });

        // 绑定添加用户按钮事件
        document.getElementById('add-user-btn').addEventListener('click', () => {
            resetUserForm();
            openUserFormModal();
        });

        // 绑定搜索按钮事件
        document.getElementById('search-button').addEventListener('click', () => {
            loadUsers(currentUserType);
        });

        // 绑定刷新按钮事件
        document.getElementById('refresh-button').addEventListener('click', () => {
            loadUsers(currentUserType);
        });

        // 绑定重置筛选按钮事件
        document.getElementById('reset-filter-button').addEventListener('click', () => {
            document.getElementById('search-input').value = '';
            loadUsers(currentUserType);
        });

        // 绑定分页按钮事件
        document.getElementById('prev-page').addEventListener('click', () => {
            const currentPage = parseInt(document.querySelector('#pagination-numbers .bg-primary').textContent);
            if (currentPage > 1) {
                loadUsers(currentUserType, currentPage - 1);
            }
        });

        document.getElementById('next-page').addEventListener('click', () => {
            const currentPage = parseInt(document.querySelector('#pagination-numbers .bg-primary').textContent);
            const totalPages = Math.ceil(parseInt(document.getElementById('total-count').textContent) / 10);
            if (currentPage < totalPages) {
                loadUsers(currentUserType, currentPage + 1);
            }
        });

        // 绑定表单模态框关闭按钮
        document.getElementById('close-form-modal').addEventListener('click', closeUserFormModal);
        document.getElementById('cancel-form-button').addEventListener('click', closeUserFormModal);

        // 绑定保存用户按钮事件
        document.getElementById('save-user-button').addEventListener('click', saveUser);

        // 绑定删除模态框关闭按钮
        document.getElementById('cancel-delete-button').addEventListener('click', closeDeleteModal);

        // 绑定确认删除按钮事件
        document.getElementById('confirm-delete-button').addEventListener('click', confirmDelete);
    });

    // 加载用户数据
    function loadUsers(userType, page = 1) {
        const searchTerm = document.getElementById('search-input').value;

        // 显示加载状态
        document.getElementById('user-table-body').innerHTML = `
        <tr class="animate-pulse">
          <td colspan="6" class="px-6 py-10 text-center text-neutral-500">
            <i class="fa fa-spinner fa-spin mr-2"></i>加载用户数据中...
          </td>
        </tr>
      `;

        // 实际项目中这里应该是真实的fetch请求
        // fetch(`/UserServlet?action=list&type=${userType}&page=${page}&search=${searchTerm}`)
        //   .then(response => response.json())
        //   .then(data => renderUsers(data));

        // 模拟数据
        setTimeout(() => {
            const mockUsers = generateMockUsers(userType, page);
            const mockData = {
                users: mockUsers,
                totalCount: userType === 'user' ? 25 : 12,
                currentPage: page
            };

            renderUsers(mockData);
        }, 800);
    }

    // 生成模拟用户数据
    function generateMockUsers(userType, page) {
        const users = [];
        const prefix = userType === 'user' ? '用户' : '管理员';
        const startIndex = (page - 1) * 10 + 1;

        for (let i = startIndex; i < startIndex + 10; i++) {
            users.push({
                id: i,
                username: `${prefix}${i}`,
                account: `account${i}`,
                password: '******',
                birthday: `199${i % 10}-${(i % 12 + 1).toString().padStart(2, '0')}-${(i % 28 + 1).toString().padStart(2, '0')}`,
                createTime: `2023-${(i % 12 + 1).toString().padStart(2, '0')}-${(i % 28 + 1).toString().padStart(2, '0')}`
            });
        }

        return users;
    }

    // 渲染用户数据
    function renderUsers(data) {
        const { users, totalCount, currentPage } = data;
        const tableBody = document.getElementById('user-table-body');
        const totalCountElement = document.getElementById('total-count');
        const pageRangeElement = document.getElementById('page-range');
        const paginationNumbers = document.getElementById('pagination-numbers');
        const emptyState = document.getElementById('empty-state');

        // 更新总数
        totalCountElement.textContent = totalCount;

        // 计算显示范围
        const start = (currentPage - 1) * 10 + 1;
        const end = Math.min(currentPage * 10, totalCount);
        pageRangeElement.textContent = `${start}-${end}`;

        // 显示空状态或用户数据
        if (users.length === 0) {
            tableBody.innerHTML = '';
            emptyState.classList.remove('hidden');
            return;
        } else {
            emptyState.classList.add('hidden');
        }

        // 渲染用户表格
        tableBody.innerHTML = users.map(user => `
        <tr class="table-row-hover">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-900">${user.id}</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                <i class="fa fa-user"></i>
              </div>
              <div>
                <div class="text-sm font-medium text-neutral-900">${user.username}</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">${user.account}</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">${user.birthday}</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">${user.createTime}</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">
            <button onclick="editUser(${user.id}, '${currentUserType}')" class="text-secondary hover:text-secondary/80 mr-3">
              <i class="fa fa-edit"></i>
              <span class="hidden sm:inline ml-1">编辑</span>
            </button>
            <button onclick="confirmDeleteModal(${user.id}, '${currentUserType}')" class="text-red-500 hover:text-red-700">
              <i class="fa fa-trash"></i>
              <span class="hidden sm:inline ml-1">删除</span>
            </button>
          </td>
        </tr>
      `).join('');

        // 渲染分页按钮
        const totalPages = Math.ceil(totalCount / 10);
        paginationNumbers.innerHTML = '';

        // 生成页码按钮
        for (let i = 1; i <= totalPages; i++) {
            const pageBtn = document.createElement('button');
            pageBtn.className = `px-3 py-1.5 rounded-lg transition-all duration-200 ${
                i === currentPage ? 'bg-primary text-white' : 'hover:bg-neutral-100 text-neutral-700'
            }`;
            pageBtn.textContent = i;
            pageBtn.addEventListener('click', () => loadUsers(currentUserType, i));
            paginationNumbers.appendChild(pageBtn);
        }

        // 禁用/启用上一页按钮
        document.getElementById('prev-page').disabled = currentPage === 1;

        // 禁用/启用下一页按钮
        document.getElementById('next-page').disabled = currentPage === totalPages;
    }

    // 打开用户表单模态框
    function openUserFormModal() {
        const modal = document.getElementById('user-form-modal');
        const modalContent = document.getElementById('form-modal-content');

        modal.classList.remove('hidden');
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
            modalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    // 关闭用户表单模态框
    function closeUserFormModal() {
        const modal = document.getElementById('user-form-modal');
        const modalContent = document.getElementById('form-modal-content');

        modalContent.classList.remove('scale-100', 'opacity-100');
        modalContent.classList.add('scale-95', 'opacity-0');

        setTimeout(() => {
            modal.classList.add('hidden');
        }, 300);
    }

    // 重置用户表单
    function resetUserForm() {
        document.getElementById('user-id').value = '';
        document.getElementById('username').value = '';
        document.getElementById('account').value = '';
        document.getElementById('password').value = '';
        document.getElementById('confirm-password').value = '';
        document.getElementById('birthday').value = '';
        document.getElementById('user-form').reset();
    }

    // 编辑用户
    function editUser(userId, userType) {
        // 实际项目中这里应该是真实的fetch请求获取用户详情
        // fetch(`/UserServlet?action=get&id=${userId}&type=${userType}`)
        //   .then(response => response.json())
        //   .then(user => fillUserForm(user));

        // 模拟用户数据
        const mockUser = {
            id: userId,
            username: `${userType === 'user' ? '用户' : '管理员'}${userId}`,
            account: `account${userId}`,
            password: '******',
            birthday: `199${userId % 10}-${(userId % 12 + 1).toString().padStart(2, '0')}-${(userId % 28 + 1).toString().padStart(2, '0')}`
        };

        fillUserForm(mockUser);
        openUserFormModal();
    }

    // 填充用户表单
    function fillUserForm(user) {
        document.getElementById('user-id').value = user.id;
        document.getElementById('username').value = user.username;
        document.getElementById('account').value = user.account;
        document.getElementById('birthday').value = user.birthday;

        // 修改表单标题
        const formTitle = currentUserType === 'user' ? '编辑用户' : '编辑管理员';
        document.getElementById('form-modal-title').textContent = formTitle;
    }

    // 保存用户
    function saveUser() {
        const userId = document.getElementById('user-id').value;
        const username = document.getElementById('username').value;
        const account = document.getElementById('account').value;
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirm-password').value;
        const birthday = document.getElementById('birthday').value;
        const userType = currentUserType;

        // 简单验证
        if (!username || !account) {
            alert('用户名和账号不能为空');
            return;
        }

        if (password && password !== confirmPassword) {
            alert('两次输入的密码不一致');
            return;
        }

        // 实际项目中这里应该是真实的fetch请求
        // const action = userId ? 'update' : 'add';
        // fetch(`/UserServlet?action=${action}&type=${userType}`, {
        //   method: 'POST',
        //   body: JSON.stringify({
        //     id: userId,
        //     username,
        //     account,
        //     password,
        //     birthday
        //   }),
        //   headers: {
        //     'Content-Type': 'application/json'
        //   }
        // })
        // .then(response => response.json())
        // .then(result => {
        //   if (result.success) {
        //     alert(userId ? '用户更新成功' : '用户添加成功');
        //     closeUserFormModal();
        //     loadUsers(userType);
        //   } else {
        //     alert('操作失败: ' + result.message);
        //   }
        // });

        // 模拟保存成功
        setTimeout(() => {
            alert(userId ? '用户更新成功' : '用户添加成功');
            closeUserFormModal();
            loadUsers(userType);
        }, 500);
    }

    // 打开删除确认模态框
    function confirmDeleteModal(userId, userType) {
        document.getElementById('delete-user-id').value = userId;
        document.getElementById('delete-user-type').value = userType;

        const modal = document.getElementById('delete-confirm-modal');
        const modalContent = document.getElementById('delete-modal-content');

        modal.classList.remove('hidden');
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
            modalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    // 关闭删除确认模态框
    function closeDeleteModal() {
        const modal = document.getElementById('delete-confirm-modal');
        const modalContent = document.getElementById('delete-modal-content');

        modalContent.classList.remove('scale-100', 'opacity-100');
        modalContent.classList.add('scale-95', 'opacity-0');

        setTimeout(() => {
            modal.classList.add('hidden');
        }, 300);
    }

    // 确认删除
    function confirmDelete() {
        const userId = document.getElementById('delete-user-id').value;
        const userType = document.getElementById('delete-user-type').value;

        // 实际项目中这里应该是真实的fetch请求
        // fetch(`/UserServlet?action=delete&id=${userId}&type=${userType}`, {
        //   method: 'POST'
        // })
        // .then(response => response.json())
        // .then(result => {
        //   if (result.success) {
        //     alert('用户删除成功');
        //     closeDeleteModal();
        //     loadUsers(userType);
        //   } else {
        //     alert('删除失败: ' + result.message);
        //   }
        // });

        // 模拟删除成功
        setTimeout(() => {
            alert('用户删除成功');
            closeDeleteModal();
            loadUsers(userType);
        }, 500);
    }

    // 登出
    function logout() {
        if (confirm('确定要退出登录吗？')) {
            // 实际项目中这里应该是真实的登出请求
            // fetch('/LogoutServlet', { method: 'POST' })
            //   .then(() => window.location.href = 'login.html');

            // 模拟登出
            alert('已成功登出');
            window.location.href = 'login.html';
        }
    }
</script>
</body>
</html>